<template>
  <div>
    <Header :left="true" title="自修审核" leftText="返回" />
    <van-dialog
      v-model="showDialog"
      title="审核"
      show-cancel-button
      confirm-button-text="通过"
      cancel-button-text="不通过"
      @confirm="checkConfirm"
      @cancel="checkFailConfirm"
    >
      <Form>
        <Field autosize type="textarea" maxlength="128" v-model="remark" size="large" left colon label="备注" />
      </Form>
    </van-dialog>
    <div style="margin-top: 80px;">
      <van-tabs
        v-model="active"
        type="card"
        :offset-top="80"
        :sticky="true"
        style="top:8px;font-size:15px;"
        color="#1c6c8d"
        @click="onClick"
      >
        <!-- 未读页面 -->
        <van-tab title="未审核" style="font-size:15px;">
          <div style="margin-top:50px;">
            <van-button :block="true" class="buttonLeft" @click="selectAll" type="primary" :text="selectFont" />
            <van-button :block="true" class="buttonRight" type="primary" @click="mutiCheckClick" text="批量审核" />
          </div>
          <div class="textScroll">
            <!-- 循环数据开始 -->
            <div v-for="item in itemsNotCheck" :key="item.id" style="margin-bottom:5px;">
              <van-swipe-cell class="item.newsCode">
                <div class="divStyle">
                  <van-row style="margin-top:10px;">
                    <van-col span="8" style="font-weight:bold;color:#A9A9A9;margin-left:5px;">{{ item.equip }}</van-col>
                    <van-col span="26" style="color:#A9A9A9;margin-left:40px"
                      ><van-icon name="assets/time.png" /> {{ item.repairTime }}</van-col
                    >
                    <van-col span="26" style="color:#A9A9A9;margin-left:5px"
                      ><van-checkbox checked-color="#138087" v-model="item.checked" shape="square"></van-checkbox
                    ></van-col>
                  </van-row>
                  <van-divider />
                  <van-row>
                    <van-col span="10" style="color:#A9A9A9;margin-left:5px;margin-bottom:5px;"
                      >自修人：{{ item.repairUser }}</van-col
                    >
                  </van-row>
                  <van-row>
                    <van-col span="100" style="color:#A9A9A9;margin-left:5px;"
                      >自修原因：{{ item.repairReason }}</van-col
                    >
                  </van-row>
                </div>
                <template #right>
                  <van-button square text="审核" type="danger" class="read-button" @click="checkClick(item.id)" />
                </template>
              </van-swipe-cell>
            </div>
            <!-- 循环数据结束 -->
          </div>
          <!-- 分页控件 -->
          <van-pagination
            width="this.screenWidth"
            class="pagination"
            force-ellipses
            v-model="queryParams.pageNum"
            :total-items="queryParams.total"
            @change="pgn_change_not_check"
            :items-per-page="queryParams.pageSize"
          />
        </van-tab>
        <!-- 已指派页面 -->
        <van-tab title="已审核" style="font-size:15px;">
          <div class="textScroll2">
            <!-- 循环数据开始 -->
            <div v-for="item in itemsChecked" :key="item.id" style="margin-bottom:5px;">
              <div class="divStyle">
                <van-row style="margin-top:10px;">
                  <van-col span="8" style="font-weight:bold;color:#A9A9A9;margin-left:5px;">{{ item.equip }}</van-col>
                  <van-col span="30" style="color:#A9A9A9;margin-left:50px"
                    ><van-icon name="assets/time.png" /> {{ item.repairTime }}</van-col
                  >
                </van-row>
                <van-divider />
                <van-row>
                  <van-col span="10" style="color:#A9A9A9;margin-left:5px;margin-bottom:5px;"
                    >自修人：{{ item.repairUser }}</van-col
                  >
                </van-row>
                <van-row>
                  <van-col span="100" style="color:#A9A9A9;margin-left:5px;margin-bottom:5px;"
                    >自修原因：{{ item.repairReason }}</van-col
                  >
                </van-row>
                <van-row>
                  <van-col span="10" style="color:#A9A9A9;margin-left:5px;margin-bottom:5px;"
                    >审核人：{{ item.checkUser }}</van-col
                  >
                </van-row>
                <van-row>
                  <van-col span="20" style="color:#A9A9A9;margin-left:5px;margin-bottom:5px;"
                    >审核时间：{{ item.checkTime }}</van-col
                  >
                  <van-col span="1">
                    <div :class="item.status === '1' ? 'labelStylePass' : 'labelStyleFail'">
                      {{ statusList[item.status] }}
                    </div>
                  </van-col>
                </van-row>
              </div>
            </div>
            <!-- 循环数据结束 -->
          </div>
          <!-- 分页控件 -->
          <van-pagination
            width="this.screenWidth"
            class="pagination"
            force-ellipses
            v-model="queryParams.pageNum"
            :total-items="queryParams.total"
            @change="pgn_change_checked"
            :items-per-page="queryParams.pageSize"
          />
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>
<script>
import {
  SwipeCell,
  Icon,
  Button,
  CellGroup,
  Cell,
  Dialog,
  Field,
  tab,
  tabs,
  Col,
  Row,
  Image as VanImage,
  Divider,
  Checkbox,
  Pagination,
  Panel,
  Toast,
} from 'vant'
Vue.use(SwipeCell)
Vue.use(Cell)
Vue.use(CellGroup)
Vue.use(Dialog)
Vue.use(tab)
Vue.use(tabs)
Vue.use(Button)
Vue.use(Col)
Vue.use(Row)
Vue.use(Icon)
Vue.use(VanImage)
Vue.use(Divider)
Vue.use(Checkbox)
Vue.use(Pagination)
Vue.use(Panel)
Vue.use(Toast)
import { storage } from '@/libs/utils'
import Header from '@/components/header.vue'
import { removeToken, getToken, setBaseApiFrefix, getBaseApiFrefix } from '@/libs/auth'
import { _httpClient } from '@/libs/api'
export default {
  components: { Button, Header, Icon, CellGroup, Cell, Field, tab, tabs, Col, Row },

  data() {
    return {
      allSelected: false,
      selectFont: '一键勾选',
      screenWidth: 0,
      checked: true,
      active: 2,
      fileUrl: '',
      itemsNotRead: [],
      itemsRead: [],
      queryParams: {
        pageNum: 1,
        pageSize: 3,
        total: 0,
      },
      statusList: { '1': '通过', '2': '不通过' }, //状态数组
      itemsNotCheck: [],
      itemsChecked: [],
      showDialog: false,
      remark: '',
      glId: null,
      checkType: null,
      user: {},
    }
  },
  created: function() {
    let oldHight = api.winWidth
    this.screenWidth = oldHight
    this.user = JSON.parse(storage.get('user'))
    let tkn = getToken()
    if (!tkn) {
      api.openWin({
        name: 'login',
        url: './login-login.html',
        rect: {
          x: 0,
          y: 150,
          w: api.winWidth,
          h: api.winHeight,
        },
      })
    }

    this.queryNotCheckList()
  },
  methods: {
    pgn_change_not_check() {
      this.queryNotCheckList()
    },
    pgn_change_checked() {
      this.queryCheckedList()
    },
    selectAll() {
      //判断当前数据是否存在
      if (this.itemsNotCheck.length == 0) {
        Toast.fail(当前无数据可操作)
        return
      }
      if (!this.allSelected) {
        this.allSelected = true
        this.selectFont = '取消勾选'
        for (let i = 0; i < this.itemsNotCheck.length; i++) {
          this.itemsNotCheck[i].checked = true
        }
      } else {
        this.allSelected = false
        this.selectFont = '一键勾选'
        for (let i = 0; i < this.itemsNotCheck.length; i++) {
          this.itemsNotCheck[i].checked = false
        }
      }
    },
    checkClick(value) {
      let _this = this
      _this.glId = value
      _this.remark = null
      _this.checkType = 0
      _this.showDialog = true
    },
    mutiCheckClick() {
      let _this = this
      _this.remark = null
      _this.checkType = 1
      _this.showDialog = true
    },
    async checkConfirm() {
      let _this = this
      try {
        if (_this.checkType === 0) {
          let res = await _httpClient.post(_httpClient.getApiPrefix() + '/app/selfcheck/checkInfo/updateSuccess', {
            body: [{ checkUser: _this.user.userName, remark: _this.remark, id: _this.glId }],
          })
          if (res.code === 200) {
            for (let i = 0; i < _this.itemsNotCheck.length; i++) {
              if (_this.itemsNotCheck[i].id === _this.glId) {
                _this.itemsNotCheck.splice(i, 1)
                break
              }
            }
          } else {
            Toast.fail(res.msg)
          }
        } else if (_this.checkType === 1) {
          let selecedList = []
          for (let i = 0; i < _this.itemsNotCheck.length; i++) {
            if (_this.itemsNotCheck[i].checked) {
              let valObj = _this.itemsNotCheck[i]
              valObj.checkUser = user.userName
              valObj.remark = _this.remark
              selecedList.push(valObj)
            }
          }
          if (selecedList.length == 0) {
            Toast('请先勾选待审核的数据')
            return
          }
          let resMuti = await _httpClient.post(_httpClient.getApiPrefix() + '/app/selfcheck/checkInfo/updateSuccess', {
            body: selecedList,
          })
          if (resMuti.code === 200) {
            _this.queryNotCheckList()
          } else {
            Toast.fail(res.msg)
          }
        }
      } catch (e) {
        Toast.fail(JSON.stringify(e))
      }
    },
    async checkFailConfirm() {
      let _this = this
      try {
        if (_this.checkType === 0) {
          let res = await _httpClient.post(_httpClient.getApiPrefix() + '/app/selfcheck/checkInfo/updateFail', {
            body: [{ checkUser: _this.user.userName, remark: _this.remark, id: _this.glId }],
          })
          if (res.code === 200) {
            for (let i = 0; i < _this.itemsNotCheck.length; i++) {
              if (_this.itemsNotCheck[i].id === _this.glId) {
                _this.itemsNotCheck.splice(i, 1)
                break
              }
            }
          } else {
            Toast.fail(res.msg)
          }
        } else if (_this.checkType === 1) {
          let selecedList = []
          for (let i = 0; i < _this.itemsNotCheck.length; i++) {
            if (_this.itemsNotCheck[i].checked) {
              let valObj = _this.itemsNotCheck[i]
              valObj.checkUser = _this.user.userName
              valObj.remark = _this.remark
              selecedList.push(valObj)
            }
          }
          if (selecedList.length == 0) {
            Toast('请先勾选待审核的数据')
            return
          }
          let resMuti = await _httpClient.post(_httpClient.getApiPrefix() + '/app/selfcheck/checkInfo/updateFail', {
            body: selecedList,
          })
          if (resMuti.code === 200) {
            _this.queryNotCheckList()
          } else {
            Toast.fail(res.msg)
          }
        }
      } catch (e) {
        Toast.fail(JSON.stringify(e))
      }
    },
    onClick(name, title) {
      if (name === 0) {
        this.queryNotCheckList()
      }
      if (name === 1) {
        this.queryCheckedList()
      }
    },
    //查询未审核信息
    async queryNotCheckList() {
      let _this = this
      Toast.loading({
        mask: true,
        forbidClick: true,
        duration: 0,
        message: 'Loading...',
      })
      try {
        let res = await _httpClient.post(
          _httpClient.getApiPrefix() +
            '/app/selfcheck/checkInfo/listNotCheck?pageNum=' +
            this.queryParams.pageNum +
            '&pageSize=' +
            this.queryParams.pageSize,
          {
            body: { siteKey: _this.user.site },
          }
        )
        if (res.code === 200) {
          if (res.rows.length == 0) {
            Toast('无数据')
            return
          }
          Toast.clear()
          _this.itemsNotCheck = res.rows
          _this.queryParams.total = res.total
        } else {
          Toast.fail(res.msg)
        }
      } catch (e) {
        Toast.fail(JSON.stringify(e))
      }
    },
    //查询已审核信息
    async queryCheckedList() {
      let _this = this
      Toast.loading({
        mask: true,
        forbidClick: true,
        duration: 0,
        message: 'Loading...',
      })
      try {
        let res = await _httpClient.post(
          _httpClient.getApiPrefix() +
            '/app/selfcheck/checkInfo/listChecked?pageNum=' +
            this.queryParams.pageNum +
            '&pageSize=' +
            this.queryParams.pageSize,
          {
            body: { siteKey: _this.user.site },
          }
        )
        if (res.code === 200) {
          Toast.clear()
          _this.itemsChecked = res.rows
          _this.queryParams.total = res.total
        } else {
          Toast.fail(res.msg)
        }
      } catch (e) {
        Toast.fail(JSON.stringify(e))
      }
    },
  },
}
</script>
<style>
body {
  background-color: white;
}
.divStyle {
  border: 1px solid #dcdcdc;
  margin-left: 3px;
  margin-right: 3px;
}
.pagination {
  position: fixed;
  bottom: 15px;
  width: 100%;
  color: rgb(0, 0, 255);
  text-align: center;
}
.read-button {
  height: 100%;
}
.buttonRight {
  position: fixed;
  margin-top: -45px;
  right: 15px;
  width: 90px;
  height: 40px;
  background-color: #1c6c8d;
  border-color: #1c6c8d;
}
.buttonLeft {
  position: fixed;
  margin-top: -45px;
  right: 110px;
  width: 90px;
  height: 40px;
  background-color: #1c6c8d;
  border-color: #1c6c8d;
}
.textScroll {
  display: inline-block;
  position: fixed;
  top: 11rem;
  bottom: 5px;
  overflow: scroll;
  right: 0;
  width: 100%;
  margin-bottom: 4.7rem;
  z-index: 1;
}
.textScroll2 {
  display: inline-block;
  position: fixed;
  top: 8rem;
  left: 0;
  bottom: 2px;
  overflow-y: scroll;
  width: 100%;
  margin-bottom: 4.7rem;
  z-index: 1;
  overflow-x: hidden;
  /*解决ios上滑动不流畅*/
  -webkit-overflow-scrolling: touch;
}
.labelStylePass {
  width: 60px;
  height: 20px;
  background-color: greenyellow;
  color: white;
  float: right;
  font-size: 13px;
  text-align: center;
  margin-top: -5px;
  line-height: 20px;
}
.labelStyleFail {
  width: 60px;
  height: 20px;
  background-color: #ff9933;
  color: white;
  float: right;
  font-size: 13px;
  text-align: center;
  margin-top: -5px;
  line-height: 20px;
}
</style>
